<template>
<div class="songInfo">
	<h2 class="song-h2">
		{{title}}
	</h2>
	<div class="song-lrc">
		<div class="song-scoll"> <!--style="height: 43px;"-->
			<div class="song-iner" :style="{transform: 'translateY('+lyricIndex+'px)'}" > <!--transform: translateY(-24px);-->
				<p class="songIritem" v-for="(item,index) in handleLyric" :class="{songLight:index==lightIndex}" > <!--time表示毫秒-->
					{{item.txt}}
					<!--{{curTime}}-->
				</p>
				
				
			</div>
		</div>
	</div>
</div>
	
	
</template>

<script>
import Lyric from 'lyric-parser'
	
export default {
	name:'songInfo',
	props:['handleLyric','title','curTime'],
	data(){
		return {
			curLyric:'',
			lyrics:'',
			lyricIndex:0,
			lightIndex:0
		
		}
	},
	
	watch:{
		
		curTime:function(newValue){
//			使用箭头函数,固定this的指向
//			遍历对象里面的时间(一般是毫秒),匹配歌曲的当前时间
			this.handleLyric.forEach((el,index)=>{
				
				if(~~(el.time/1000)==newValue){
//					console.log(index+1);
					this.lightIndex=index;
//					匹配数组的index(相当于距离),进行位移
					this.lyricIndex=(-24)*index
				}
			})
		}
	}
}


</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';

.songInfo{
	padding: 0 r(70px);
    margin-top: r(50px);
    
}
.song-h2{
	text-align: center;
    font-size: r(30px);
    line-height: 1.1;
    color: #fefefe;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.song-lrc{
	position: relative;
    margin-top: r(28px);
    .song-scoll{
    	height: r(86px);
    	line-height: 1.5;
	    font-size: r(26px);
	    /*height: r(144px);*/
	    overflow: hidden;
	    text-align: center;
    	color: hsla(0,0%,100%,.6);
    }
}
.song-iner{
	/*transform: translateY(r(-48px));*/
	-webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
}
.songIritem{
	padding-bottom: r(10px);
	
}
.songLight{
	color: white;
}


</style>